<template>
  <div class="current-process">
    <div class="section-title">
      <span>面试信息</span>
    </div>

    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="160px"
      status-icon
      label-position="top"
    >
      <el-form-item label="面试时间：" prop="firstInterviewerTime">
        <el-date-picker
          v-model="form.firstInterviewerTime"
          type="date"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item label="面试结果：" prop="firstInterviewerResult">
        <el-radio-group v-model="form.firstInterviewerResult">
          <el-radio
            v-for="(option, index) in sys_interview_result"
            :key="index"
            :label="option.value"
          >
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        label="是否需要下一轮面试："
        prop="isSecond"
        v-if="form.firstInterviewerResult == 0"
      >
        <el-radio-group v-model="form.isSecond">
          <el-radio :label="0" :value="0">是</el-radio>
          <el-radio :label="1" :value="1">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="面试官："
        prop="interviewerIdSecond"
      >
        <el-select
          v-model="form.interviewerIdSecond"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in requireProposerOptions"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="下一轮面试类型："
        prop="interviewTypeSecond"
      >
        <el-select
          v-model="form.interviewTypeSecond"
          placeholder="面试类型"
          clearable
        >
          <el-option
            v-for="item in sys_interview_type"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="下一轮面试方式："
        prop="interviewMethodSecond"
      >
        <el-select
          v-model="form.interviewMethodSecond"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in sys_interview_method"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="面试时间："
        prop="appointmentTimeSecond"
      >
        <el-date-picker
          v-model="form.appointmentTimeSecond"
          type="date"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="下一轮面试地址/视频会议地址："
        prop="addressSecond"
      >
        <el-input
          v-model="form.addressSecond"
          placeholder="请输入"
          style="width: 100%"
        />
      </el-form-item>

      <el-form-item
        v-if="form.isSecond == 0&&form.firstInterviewerResult == 0"
        label="面试内容记录："
        prop="firstContent"
      >
        <el-input
          v-model="form.firstContent"
          type="textarea"
          placeholder="请输入"
          :autosize="{ minRows: 3, maxRows: 6 }"
        />
      </el-form-item>

      <div class="action-buttons">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleSave">保存</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const props = defineProps({
  FirstData: Array,
  sys_interview_type: Array,
  sys_interview_method: Array,
  requireProposerOptions: Array,
  initialData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["submit"]);

const { proxy } = getCurrentInstance();
const { sys_interview_result } = proxy.useDict("sys_interview_result");
const formRef = ref(null);

const form = reactive({
  firstInterviewerTime: "",
  firstInterviewerResult: "0",
  isSecond: "0",
  interviewerIdSecond: "",
  interviewTypeSecond: "",
  interviewMethodSecond: "",
  appointmentTimeSecond: "",
  addressSecond: "",
  firstContent: "",
});

const rules = reactive({
  firstInterviewerTime: [
    { required: true, message: "请选择面试时间", trigger: "change" },
  ],
  firstInterviewerResult: [
    { required: true, message: "请选择面试结果", trigger: "change" },
  ],
  isSecond: [
    { required: true, message: "请选择是否需要下一轮面试", trigger: "change" },
  ],
  interviewerIdSecond: [
    { required: true, message: "请选择面试官", trigger: "change" },
  ],
  interviewTypeSecond: [
    { required: true, message: "请选择下一轮面试类型", trigger: "change" },
  ],
  interviewMethodSecond: [
    { required: true, message: "请选择下一轮面试方式", trigger: "change" },
  ],
  appointmentTimeSecond: [
    { required: true, message: "请选择面试时间", trigger: "change" },
  ],
});
watch(
  () => props.initialData,
  (newVal) => {
    if (newVal) {
      Object.assign(form, newVal);
    }
  },
  { immediate: true, deep: true }
);
const handleCancel = () => {
  emit("cancel");
};

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("save", { ...form });
      // ElMessage.success("保存成功");
    } else {
      ElMessage.error("请填写信息");
    }
  });
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("submit", { ...form });
      // ElMessage.success("提交成功");
    } else {
      ElMessage.error("请填写信息");
    }
  });
};
</script>

<style scoped>
.current-process {
  padding: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #007bff;
}

.action-buttons {
  text-align: right;
  margin-bottom: 20px;
}
</style>
